<template>
    <div class="sub-side-top">
            <el-menu class="el-menu-demo"  
            router :default-active="$route.path" 
            @open="handleOpen" 
            @close="handleClose" 
            @select="setRouter"
            :collapse="isCollapse" 
            :unique-opened="true"
            :background-color="primaryColor"
            text-color="#fff"
            active-text-color="#fff"
            mode="horizontal"
            >
            <el-submenu :index=(index+1).toString() v-for="(item,index) in aside"  :key="index" v-if="item.type!==3" >
                <template slot="title" >
                    <span class="nav">{{item.name}}</span>
                </template>
                <div v-for="(list,index) in item.list"  :key="index" v-if="list.type!==3" >
                    <el-menu-item :index="`/home/${list.url}`" >{{list.name}}</el-menu-item>
                </div>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
export default {
    data() {
            return {
                aside:'',
                isCollapse:false,
                currentRouter: ''
            }
        },
        created(){
            // this.aside = this.asideAll
            this.aside=JSON.parse(sessionStorage.getItem('aside'))
        },
        components: {},
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            takeCollapse:function(){
                if(this.isCollapse){
                    this.isCollapse = false;
                }else{
                    this.isCollapse = true
                }
            },
            setRouter(index,asideArray) {
                const title = this.aside[asideArray[0] -1].name
                this.$store.commit('SET_BREADCRUMBARR', [{
                    title
                }]);

            }
        },
        watch: {
            $route(newValue, oldValue){
                const currentRouter = this.$store.state.common.breadcrumbArr.slice(0);
                currentRouter.push(newValue.meta);
                this.$store.commit('SET_BREADCRUMBARR', currentRouter);
            }
        },
        computed: {
                primaryColor() {
                    return this.$store.state.common.primaryColor;
                }
            }
}
</script>
<style lang="scss" scoped>
@import './iconfont/iconfont.css';
.sub-side-top{
        color: white;
        height: 100%;
        ul {
            display: flex;
            height: 100%;
            align-items: center;
        }
        /deep/ .el-submenu__title i{
            color: white;
        }
        /deep/ .el-icon-arrow-down:before {
                content: "\E603" !important;
            }
    }
</style>
